<template>
	<view>
		<!--#ifdef APP-PLUS-->
		<view class="lz-status_bar">
			<view class="lz-top_view"></view>
		</view>
		<!--#endif-->
		<!-- #ifndef MP-WEIXIN -->
		<view class="kaoshi-head">
			<view class="kaoshi-head-top">
				<view class="kaoshi-head-left" @tap="$navigateBack">
					<view class="iconfont icon-zuojiantou"></view>
				</view>
				<view class="kaoshi-head-m">通知公告</view>
			</view>
		</view>
		<!--#endif-->
		<mescroll-body height="auto" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"
			:down="downOption" :up="upOption">
			<view class="noticelist">
				<view class="noticebox" v-for="(item, index) in list" :key="index" @tap="gotoDetail(item)">
					<image src="../../static/img/myicon1.png" mode="aspectFit" class="noticeimg"></image>
					<view class="noticetext">
						<view class="noticetitle">{{ item.title }}</view>
						<view class="noticetime">{{ item.noticetime }}</view>
					</view>
					<view class="iconfont icon-arrow"></view>
				</view>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
import {
	mapState
} from 'vuex';
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js"
export default {
	mixins: [MescrollMixin], // 使用mixin
	data() {
		return {
			mescroll: null, // mescroll实例对象 (此行可删,mixins已默认)
			// 下拉刷新的配置(可选, 绝大部分情况无需配置)
			downOption: {
				use: true, // 是否启用下拉刷新; 默认true
				auto: false, // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
				native: false // 启用系统自带的下拉组件,默认false;仅mescroll-body生效,mescroll-uni无效(native: true, 则需在pages.json中配置"enablePullDownRefresh":true)
			},
			// 上拉加载的配置(可选, 绝大部分情况无需配置)
			upOption: {
				page: {
					num: 0,
					size: 20 // 每页数据的数量,默认10
				},
				noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
				empty: {
					tip: '暂无相关数据'
				}
			},
			// 列表数据
			list: [],
		}
	},
	computed: {
		...mapState(['subject', 'userinfo']),
	},
	onShow() {
		this.canReset && this.mescroll.resetUpScroll() // 自行实现的刷新指定一条数据  
		this.canReset = true // 过滤第一次的onShow事件,避免初始化界面时重复触发upCallback, 无需配置auto:false
	},
	onLoad() {
		// #ifdef MP-WEIXIN
		wx.showShareMenu({
			withShareTicket: true,
			menus: ["shareAppMessage", "shareTimeline"]
		})
		// #endif
	},
	methods: {
		async upCallback(page) {
			let pageNum = page.num; // 页码, 默认从1开始
			let pageSize = page.size; // 页长, 默认每页10条
			let res = await this.$myHttp.post({
				url: this.$myHttp.urlMap.noticeList,
				data: {
					subject_id: this.subject.id || this.subList[0].id,
					page: pageNum,
					limit: pageSize,
					cate_id: 1
				},
				needLogin: false
			})
			if (res.code == 1) {
				// 接口返回的当前页数据列表 (数组)
				let curPageData = res.data.data;
				// 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
				let curPageLen = curPageData.length;
				// 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
				// let totalPage = data.xxx;
				// 接口返回的总数据量(如列表有26个数据,每页10条,共3页; 则totalSize=26)
				let totalSize = res.data.total;

				this.mescroll.endBySize(curPageLen, totalSize);
				if (page.num == 1) this.list = []; //如果是第一页需手动置空列表
				this.list = this.list.concat(curPageData); //追加新数据
			} else {
				this.mescroll.endErr()
			}
			// 此处仍可以继续写其他接口请求...
			// 调用其他方法...
		},
		gotoDetail(item) {
			if (item.url == '') {
				uni.navigateTo({
					url: '/pages/article/detail?id=' + item.id + '&type=2'
				})
			} else {
				uni.navigateTo({
					url: '/pages/webview/webview?url=' + item.url + '&title=' + item.title
				})
			}
		},
	}
}
</script>

<style>
page {
	background: #f6f6f6;
}

.noticelist {
	margin: 0 15px;
}

.noticebox {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 15px 0;
	padding: 15px;
	border-radius: 8px;
	background-color: #fff;
	box-shadow: 2px 4px 10px rgb(0 0 0 / 8%);
}

.noticeimg {
	width: 22px;
	height: 22px;
	margin-right: 10px;
	background: #d7e4fe;
	padding: 5px;
	border-radius: 24px;
}

.noticetext {
	width: calc(100% - 50px);
	margin-right: auto;
}

.noticetitle {
	width: 100%;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	margin-bottom: 6px;
	color: #333;
}

.noticetime {
	color: #999;
	font-size: 13px;
}

.icon-arrow {
	color: #adadad;
	font-size: 15px;
}
</style>
